<template>
  <div class="double-select" v-show="show">
      <CheckboxGroup class="h-checkbox-group" 
      v-model="select"
      @on-change="$_onSelectedChange" >
            <Checkbox v-for="c in channels" :key="c" :label="c" :disabled="$_disabled(c)">
              {{channel2GoodText(c)}}
            </Checkbox>
            <label class="hint" v-show="!select_disable">
                 Please select 2 channels.
            </label>
      </CheckboxGroup>
  </div>
</template>

<script>
/* eslint-disable */
export default {
  data() {
    return {
      select: []
    };
  },
  props: {
    showIndex: {
      type: Number,
      default: 0
    },
    channels: {
      type: Array //String[]
    },
    raw_string: {
      type: String
    },
     channel2GoodText:{
      type:Function
    }
  },
  computed: {
    show() {
      return this.showIndex == 1;
    },
    select_disable() {
      return this.select.length >= 2;
    }
  },
  methods: {
    $_disabled(channel) {
      return this.select_disable && !this.select.includes(channel);
    },
    $_onSelectedChange(val) {
      if (Array.isArray(val) && val.length == 2) {
        this.$emit("double-channels", val);
      }
    }
  },
  watch: {
    raw_string() {
      this.select = [];
    }
  }
};
</script>

<style lang="scss">
.double-select {
  .h-checkbox-group {
    margin-top: 5px;
    padding: 0 0px;
    label {
      display: block;
      padding: 2px 0;
      .ivu-checkbox {
        margin-right: 4px;
      }
    }
    .hint {
      color: red;
      opacity: 0.8;
    }
  }
}
</style>
